Fork: 0
mark / pixi.js
Transfer to URL with SHA Find file
Newer
Older
pixi.js / examples / example 22 - Complex Masking / index.html
@Alvin Alvin on 12 Dec 2014 3 KB fixed tiny variable issue in examples
Raw Blame History 
<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 22 complex masking</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <script>

    // holder to store aliens
    var aliens = [];
    // create an array of assets to load
    var alienFrames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"];

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x3da8bb);


    // create a renderer instance.
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    // create an empty container
    var alienContainer = new PIXI.DisplayObjectContainer();
    alienContainer.position.x = 400;
    alienContainer.position.y = 300;

    
    stage.addChild(alienContainer);
        
    // start animating
    requestAnimFrame(animate);
    
    var graphics = new PIXI.Graphics().beginFill(0xFF0000);

    var liveGraphics = new PIXI.Graphics().beginFill(0xFF0000);

    var path = [];


    stage.interactive = true;
    
    var isDown = false;
    var color = 0;

    var colors = [0x5D0776, 0xEC8A49, 0xAF3666, 0xF6C84C, 0x4C779A];
    var colorCount = 0;

    var label = new PIXI.Text("Click and drag anywhere do draw complex masks in pixi / do an art attack", {fill:"white", font:"16px Arial"});
    label.x = 10;
    label.y = 10;
    
    for (var i = 0; i < 100; i++){
        
            var frameName = alienFrames[i % 4];

            // create an alien using the frame name..
            var alien = PIXI.Sprite.fromImage(frameName);
            alien.tint = Math.random() * 0xFFFFFF;

            alien.position.x = Math.random() * 800 - 400;
            alien.position.y = Math.random() * 600 - 300;
            alien.anchor.x = 0.5;
            alien.anchor.y = 0.5;
            aliens.push(alien);
            alienContainer.addChild(alien);
        }

    stage.mousedown = function(data)
    {
        isDown = true;
        path = [];
        color = colors[colorCount++ % colors.length]
    //  liveGraphics.clear().beginFill(color);
    //  liveGraphics.drawCircle(data.global.x, data.global.y, 030);
        

    }

    stage.mousemove = function(data)
    {
        if(!isDown)return;

        path.push(data.global.x);
        path.push(data.global.y);

        liveGraphics.clear();
        liveGraphics.beginFill(color);
        if(path.length > 12)liveGraphics.drawPolygon(path);
        liveGraphics.endFill();

    }

    stage.mouseup = function()
    {
        isDown = false;
        graphics.beginFill(color);
        graphics.drawPolygon(path)
        graphics.endFill();
        path = [];    
    }

    graphics.mask = liveGraphics;

    stage.addChild(graphics);
    stage.addChild(liveGraphics);
    stage.addChild(label);


    function animate() {
        
        // render the stage
        renderer.render(stage);


        requestAnimFrame(animate);
    }

    var logo = PIXI.Sprite.fromImage("../../logo_small.png")
    stage.addChild(logo);


    logo.anchor.x = 1;
    logo.position.x = window.innerWidth
    logo.scale.x = logo.scale.y = 0.5;
    logo.position.y = window.innerHeight - 70;
    logo.interactive = true;
    logo.buttonMode = true;
    logo.click = logo.tap = function()
    {
        window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
    }

    </script>

    </body>
</html>